<template>
	<el-container :direction="vertical" class="bg">
		<el-header height="130px">
			<img src="../../assets/images/logo.png" alt="盛邦升华" />
			<h1>盛邦升华考试后台管理系统</h1>
		</el-header>
		<!-- section -->
		<el-container :direction="horizontal" id="content">
			<el-container :direction="vertical" class="content-left">
				<h3>注册说明：</h3>
				<p>● 用户名设置：采用实名制。</p>
				<p>
					●
					密码设置：密码最小长度为8位，最大长度为20位，密码至少包含一个数字、一个字母。
				</p>
			</el-container>
			<el-container :direction="vertical" class="content-right">
				<h2>登录</h2>
				<el-main>
					<el-form
						:model="form"
						ref="form"
						:inline="false"
						label-width="120px"
						size="normal"
						class="form-register"
					>
						<el-form-item label="用户名：">
							<el-input
								v-model="form.username"
								prefix-icon="el-icon-s-custom"
								placeholder="请输入3-12位大小写用户名"
							></el-input>
						</el-form-item>
						<el-form-item label="密码：">
							<el-input
								v-model="form.userpassword"
								prefix-icon="el-icon-lock"
								placeholder="请输入6-12位大小写字母"
								type="password"
							></el-input>
						</el-form-item>

						<el-form-item>
							<el-button
								type="primary"
								@click.prevent="onSubmit('form')"
								class="btn-register"
								>立即登录</el-button
							>
							<router-link :to="{ name: 'Register' }">
								没有账号，请注册
							</router-link>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</el-container>

		<!-- footer部分 -->
		<el-footer>
			<router-link :to="{ name: 'Home' }">
				<i class="el-icon-s-home"></i> 返回首页
			</router-link>
			<span class="slogan">- 学好硬本领 赢在软实力 -</span>
		</el-footer>
	</el-container>
</template>

<script>
// import request from "../plugins/axios";
export default {
	data() {
		return {
			vertical: "vertical",
			horizontal: "horizontal",
			form: {
				username: "",
				userpassword: "",
			},
		};
	},
	methods: {
		onSubmit() {
			// 将数据(form)放到表单对象中，因为后台接收的数据类型是表单对象
			const formData = new FormData();
			for (let key in this.form) {
				formData.append(key, this.form[key]);
			}
			// 提交数据
			this.$axios
				.post(`/system/sqUserlogin/userLogin`, formData)
				.then((res) => {
					if (res.data.code != 1) {
						alert(res.data.msg);
						return false;
					}
					alert(res.data.msg);
					// 获取用户基本信息
					const userInfo = res.data.data.userInfo;
					// 在用户中添加角色信息
					userInfo.role = res.data.data.userRoleInfo.remark;

					this.$store.commit("userInfoMutation", userInfo);

					// 将数据转换为json格式的字符串
					const userInfoStr = JSON.stringify(res.data.data.userInfo);
					// 将用户信息存储到本地
					localStorage.setItem("userInfo", userInfoStr);

					// 登录成功跳转至首页
					this.$router.push("/");
				})
				.catch((err) => {
					console.log(err);
				});
		},
	},
};
</script>

<style scoped>
.bg {
	/* position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0; */
	background-image: url(../../assets/images/bg.jpg);
	background-size: 100% 100%;
	background-position: center;
}
.el-header {
	position: relative; /* 相对定位 */
}
.el-header img {
	position: absolute; /* 绝对定位  参照物是 el-header */
	left: 70px;
	top: 0;
}
.el-header h1 {
	text-align: center;
	line-height: 130px;
	font-size: 36px;
	color: #033887;
}

/* content样式 */
#content {
	width: 1200px;
	margin: 10px auto 0;
	background-image: url(../../assets/images/bg-main.png);
	background-repeat: no-repeat;
	background-position: center; /* 背景图片居中显示 */
	background-size: 100% 100%; /* 图片充满容器，但是图片可能变形 */
	/* background-size: cover; */ /* 图片充满容器，但是图片等比缩放 */
	border-radius: 17px;
	box-shadow: 15px 15px 20px #b1caf1;
}

.content-left {
	flex: 0 0 600px;
	padding: 0 70px;
	/* 容器内的每一项在主轴上居中显示 */
	justify-content: center;
	color: #fff;
	line-height: 1.6em;
	box-sizing: border-box;
}
.content-left h3 {
	font-size: 28px;
	margin-bottom: 10px;
}
.content-left p {
	font-size: 20px;
}
.content-right {
	padding: 10px 50px;
}
.content-right h2 {
	text-align: center;
	/* 文字间距 */
	letter-spacing: 1em;
	color: #033887;
}
.content-right .el-main {
	display: flex;
	/* 主轴方向 默认水平从左到右*/
	/* column 主轴方向从上到下 */
	flex-direction: column;
	/* 主轴上的项(元素) 排列方式  居中center*/
	justify-content: center;
	margin-top: 10px;
	background-image: url(../../assets/images/border.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.btn-register {
	width: 100%;
	background-color: #033887;
	box-shadow: 5px 5px 5px rgb(67, 155, 228);
}

.el-footer {
	/* 默认高度是60px */
	padding: 0 70px;
	display: flex;
	justify-content: space-between;
	line-height: 60px;
}
.el-footer a {
	color: #033887;
	text-decoration: none;
}
.el-footer .slogan {
	font-size: 20px;
	font-weight: 700;
	color: #033887;
	letter-spacing: 0.5em;
}
</style>

<style>
/* 全局样式 */
/* 图标大小及背景色 */
.el-input__prefix {
	left: 0;
	top: 0;
	width: 40px;
	background-color: #033887; /* 图标背景色 */
	font-size: 28px; /* 和字体一样控制图标大小 */
	border-radius: 5px;
	color: #fff; /* 控制图标颜色 */
}

/* 控制表单文字的位置 */
.el-input--prefix .el-input__inner {
	padding-left: 48px;
}

/* 控制label 字体大小及颜色 */
.el-form-item__label {
	font-size: 18px;
	color: #033887;
}
</style>
